<template>
  <div>
    <div class="content">
      <ul class="ul">
        <li>30天无忧退货</li>
        <li>48小时快速退款退货</li>
        <li>满88元免邮费</li>
      </ul>

      <ul class="thing">
        <li v-for="item in goodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="" />
          <input type="checkbox" @change="change" v-model="item.isChecked" />
          <p class="p1">{{ item.goods_name }}</p>
          <p class="p2">¥{{ item.retail_price }}</p>
          <p class="p3">x{{ item.number }}</p>
        </li>
      </ul>
    </div>
    <div class="last">
      <input type="checkbox" @change="onSubmit" v-model="isAllChecked" />全选
      <span class="zong"> ¥{{ total }}</span>
      <div class="money" @click="buy">
        <p>下单</p>
      </div>
    </div>
  </div>
</template>

<script>
import { list } from "@/api/cart/index.js";
export default {
  data() {
    return {
      goodsList: [],
      result: [],

      isAllChecked: false
    };
  },
  computed: {
    total() {
      var num = 0;
      for (var i = 0; i < this.goodsList.length; i++) {
        if (this.goodsList[i].isChecked) {
          num += this.goodsList[i].number * this.goodsList[i].retail_price;
        }
      }
      return num;
    }
  },
  created() {
    list({
      openId: "1231"
    }).then(res => {
      console.log(res);
      for (var i = 0; i < res.data.length; i++) {
        res.data[i].isChecked = false;
      }

      this.goodsList = res.data;
    });
  },
  mounted() {},
  methods: {
    onSubmit() {
      // 如果列表项 有一项没有选中 点击全选按钮  全部选中true
      // 如果全部选中 点击全选按钮 取消选中
      // 控制列表项的全部选中获取全部取消选中
      var bol = this.goodsList.some(function(ele) {
        return ele.isChecked == false;
        // 如果有一项选中 true
        // 如果全部选中 true
        // 如果全部没有选中 false
      });
      if (bol) {
        //有一项没有选中,或者全部没有选中,
        this.goodsList.forEach(function(ele) {
          ele.isChecked = true;
        });
      } else {
        // 全部选不中

        this.goodsList.forEach(function(ele) {
          ele.isChecked = false;
        });
      }
    },
    change() {
      var bol = this.goodsList.every(function(ele) {
        return ele.isChecked == true;
      });
      console.log(bol);
      if (bol) {
        // 列表项全部选中
        this.isAllChecked = true;
      } else {
        this.isAllChecked = false;
      }
    },

    buy() {
      this.$router.push({
        name: "cart1"
        // path: "/cart/address",
      });
    }
  }
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 2000px;
  background-color: #f5f5f5;
  overflow: hidden;
}
.wy {
  color: gray;
  position: absolute;
  top: 10px;
  left: 10px;
}
.ul {
  display: flex;
  font-size: 12px;
  align-items: center;
  justify-content: space-around;
  height: 40px;
  list-style: circle;
  // color: red;
}
.thing li {
  width: 100%;
  height: 102px;
  background-color: #fff;
  margin-top: 1px;
}
.thing img {
  width: 70px;
  height: 70px;
  background-color: #f5f5f5;
  position: absolute;
  left: 50px;
  margin-top: 30px;
}
.p1 {
  color: black;
  position: absolute;
  left: 140px;
  margin-top: 40px;
}
.p2 {
  position: absolute;
  left: 140px;
  margin-top: 80px;
}
.p3 {
  position: absolute;
  left: 290px;
  margin-top: 70px;
}
.thing input {
  position: absolute;
  left: 20px;
  margin-top: 55px;
}
.last {
  position: absolute;
  top: 850px;
  left: 20px;
}
.zong {
  position: absolute;
  top: 10px;
  left: 200px;
  color: brown;
}
.money {
  width: 80px;
  height: 50px;
  background-color: brown;
  position: absolute;
  top: 0px;
  left: 260px;
}
.money p {
  font-size: 16px;
  color: #fff;
  line-height: 20px;
}
</style>